<template>
  <!--  归档页面 -->
  <div class="main">
    <div class="main_box">
      <!-- 左 -->
      <div class="left">
        <!-- 大标题 -->
        <h2>幼稚园</h2>
        <!-- 友链列表 title -->
        <h5>
          <i class="iconfont" style="color: #14a9eb">&#xe608;</i>&nbsp;友链列表
          <span class="count">16 条</span>
        </h5>
        <!-- 友链内容盒子 大盒子 -->
        <div class="child-chain-box">
          <ul class="chain-ul">
            <li class="chain-li" v-for="item in 4" :key="item">
              <a href="javascript:;" class="chain">
                <span class="chain-name">友链名字</span>
                <div class="chain-txt-icon">
                  <div class="chain-txt">123455</div>
                  <div class="chain-icon">
                    <img src="" alt="" />
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <!-- 底部 -->
        <div class="left-foot">
          <h5>
            <i class="iconfont" style="color: #14a9eb">&#xe608;</i
            >&nbsp;申请格式
          </h5>
          <!-- 申请流程 -->
          <div class="application-method">
            <ul class="method-ul">
              <li class="method-li">
                博客名称 + 博客地址 + 博客Logo + 博客简介
              </li>
              <li class="method-li">- 博客地址/logo</li>
              <li class="method-li">- 博客地址/avatar</li>
              <li class="method-li">(大家在留言栏目里留言即可)</li>
            </ul>
          </div>
          <!-- 申请案例 -->
          <div class="application-case">
            <ul class="case-ul">
              <li class="case-li">
                博客名称：<span class="case-name">博客名称：追尾巴的猫</span>
              </li>
              <li class="case-li">
                博客地址：<a href="https://www.lwjppz.cn"
                  >https://www.lwjppz.cn</a
                >
              </li>
              <li class="case-li">
                博客Logo：<a href="https://www.lwjppz.cn/logo"
                  >https://www.lwjppz.cn/logo</a
                >
              </li>
              <li class="case-li">
                博客简介：<span class="case-name"
                  >山有木兮木有枝，心悦君兮君不知</span
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="register">
        <MyInfo></MyInfo>
        <Notice></Notice>
        <Mydate></Mydate>
        <NewReply></NewReply>
        <Tags></Tags>
      </div>
    </div>
  </div>
</template>

<script>
  // 右
  import MyInfo from '@/components/register/MyInfo.vue';
  import Notice from '@/components/register/Notice.vue';
  import Mydate from '@/components/register/Mydate.vue';
  import NewReply from '@/components/register/NewReply.vue';
  import Tags from '@/components/register/Tags.vue';
  // 接口

  // 导入时间库
  export default {
    name: 'Child',
    data() {
      return {};
    },
    components: {
      MyInfo,
      Notice,
      Mydate,
      NewReply,
      Tags,
    },
    methods: {},
    created() {},
  };
</script>

<style lang="less" scoped>
  @import url('../../state/mainPublic.less');
  @import url('../../state/css/barList/child.less');
</style>
